<template>
  <div class="home">
    <nav-bar></nav-bar>
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in category" :key="index" :title="item.title">
        <div class="detailparent">
          <detail
            class="detailitem"
            :detailitem="categoryitem"
            v-for="(categoryitem,categoryindex) in item.list"
            :key="categoryindex"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import NavBar from '../components/common/Navbar'
  import Detail from './Detail'
export default {
    data(){
      return {
        active:0,
        category:[]
      }
    },
    components:{
      NavBar,
      Detail
    },
  methods:{
    async selectCategory() {
      const res = await this.$http.get("/category");
      this.category = this.changeCategory(res.data);
    },
    changeCategory(data) {
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        // item.finished = false;
        // item.loading = true;
        item.pagesize = 10;
        return item;
      });
      return category1;
    },
    async selectArticle() {
      const categoryitem = this.categoryItem();
      const res = await this.$http.get("/detail/" + categoryitem._id,{
        params: {
          page: categoryitem.page,
          pagesize: categoryitem.pagesize
        }
      });
      categoryitem.list = res.data
    },
    categoryItem() {
      const categoryitem = this.category[this.active];
      return categoryitem;
    }
  },
  watch: {
    active() {
        this.selectArticle();
    }
  },
  created() {
    this.selectCategory();
  }
}
</script>

<style lang="less" scoped>
  .home {
    background-color: white;
  }
  .detailparent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .detailitem {
      margin: 1.389vw 0;
      width: 45%;
    }
  }

</style>
